<template>
	<view>
		<view class="home-money-wrapper" v-for="(item,index) in money" :key="index">
			<view :class="{outTheme:item.theme==='支出',inTheme:item.theme==='收入'}">{{item.theme}}</view>
			<view class="home-money-content">
				<view class=" home-money-note">{{item.note}}</view>
				<view class="home-money-number">￥{{item.number}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			this.$store.commit('getMoney');
		},
		computed: {
			money() {
				return this.$store.getters.setMoney;
			}
		}
	}
</script>

<style lang="scss">
	.home-money-wrapper {
		margin: 15px;
		display: flex;
		border-radius: 5px;
		box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
		align-items: center;
		padding: 5px;
		white-space: nowrap;
		align-items: center;
		border: 1px solid rgb(201, 199, 199);
	}

	.outTheme,
	.inTheme {
		border-radius: 5px;
		padding: 5px 10px;
		color: #f1ebeb;
		box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
		margin-right: 10px;
	}

	.outTheme {
		background-color: #b15140;
	}

	.inTheme {
		background-color: #158f10;
	}

	.home-money-content {
		flex-grow: 1;
		display: flex;
		align-items: center;

		>.home-money-note {
			flex-grow: 1;
			white-space: pre-wrap;
			overflow: auto;
			max-height: 50px;
		}

		>.home-money-number {
			font-size: 18px;
			margin-right: 10px;
			margin-left: 10px;
			font-weight: 600;
		}
	}
</style>
